<template>
  <div class="content">
  <div >
    <el-form :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer">
      <h3 class="loginTitle">
        系统登录
      </h3>
      <el-form-item prop="username">
        <el-input type="text" v-model="loginForm.username" placeholder="亲，请输入用户名" >
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="loginForm.password" placeholder="亲，请输入密码" >
        </el-input>
      </el-form-item>
      <el-dialog 
      :visible.sync="isSlideVerifyVisible" 
      width= "350px" 
      height="auto"
      :modal="false"
      overflow= auto >
        <slide-verify
            ref="slideblock"
            @again="onAgain"
            @fulfilled="onFulfilled"
            @success="onSuccess"
            @fail="onFail"
            @refresh="onRefresh"
            :accuracy="accuracy"
            :slider-text="text"
        ></slide-verify>
        <div>{{msg}}</div>

        <button @click="handleClick">刷新</button>
      </el-dialog >
      <el-checkbox v-model="checked" class="loginRemember">记住我</el-checkbox>
      <el-button class="tologin" type="primary"  @click="openSlideVerify">登录</el-button>

    </el-form>
  </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import Cookies from 'js-cookie';
export default {
  name: "Login",
  data(){
    return{
      isSlideVerifyVisible: false ,
      captchaUrl: "",
      loginForm:{
        username:"",
        password:""
      },
      checked: true,
      rules:{
        username:[{required:true,message:"请输入用户名",trigger:"blur"},{ min: 0, max: 14, message: '长度在 5 到 14 个字符', trigger: 'blur' }
        ],
        password:[{required:true,message:"请输入密码",trigger:"blur"},,{ min: 1,  message: '密码长度要大于6', trigger: 'blur' }],

      },
      msg: '',
      text: '向右滑',
      // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
      accuracy: 1,
      flag:false

    }
  },
  methods:{
    submitLogin(){
     console.log("进入登录1")
      this.$refs.loginForm.validate((valid) => {
        console.log("进入登录2")
        console.log(this.loginForm)
        if (valid && this.flag===true) {
          request.post('/admin/login',this.loginForm).then(res =>{
            if(res.code=="200")
            {

              this.$notify("登录成功")
              if(res.data!==null)
              {
                Cookies.set('user',JSON.stringify(res.data))
              }
              this.$router.push("/")

            }
            else
            {
              alert("密码或用户名错误")
            }
          })

        } else {

          this.$message.error('登录出错请重新输入');
          return false;
        }
      });
    },
    onSuccess(times){
      console.log('验证通过,耗时 '+times + '毫秒');
      this.msg = 'login success, 耗时${(times / 1000).toFixed(1)}s'
      this.flag=true
      this.submitLogin()
    },
    onFail(){
      console.log('验证不通过');
      this.msg = ''
    },
    onRefresh(){
      console.log('点击了刷新小图标');
      this.msg = ''
    },
    onFulfilled() {
      console.log('刷新成功啦！');
    },
    onAgain() {
      console.log('检测到非人为操作的哦！');
      this.msg = 'try again';
      // 刷新
      this.$refs.slideblock.reset();
    },
    handleClick() {
      // 父组件直接可以调用刷新方法
      this.$refs.slideblock.reset();
    },
    openSlideVerify() {
        // 通过 $refs 访问 slide-verify 组件，并手动调用其弹出方法
        this.isSlideVerifyVisible = true;
    }
  }
};
</script>

<style lang="less" scoped>
.content
{
  width: 100%;
  height: 100%;
  background-image: url('../../assets/logback.png');
  background-size:100% ;
  display: flex;
  justify-content: center;

  position: fixed;
  align-items: center;

}
.loginContainer{
  border-radius: 15px;
  background-clip: padding-box;
  margin: 25px auto;
  height: 300px;
  width: 350px  ;
  padding: 50px 50px 50px 50px;
  background: aliceblue;
  border:1px ;
  box-shadow: 0 0 25px ;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.loginTitle{
  margin: 0px auto 48px auto;
  text-align: center;
  font-size: 40px;
  color: dodgerblue;
}
.loginRemember{
  text-align: left;
  margin: 0px 0px 15px 0px;
}
.tologin{
  width:100%;
  // margin: px;
}

</style>

